<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h1>{{msg}}</h1>
      <router-link :to="{name:'users'}">用户列表</router-link>

      <router-view></router-view>
    </div>

    <!-- 组件中的实际内容 -->
    <template id="users">
      <div>
        <h1>用户信息</h1>
        <!-- <a href="javascript:;" style="text-decoration: none;">添加用户信息</a> -->
        <router-link :to="{name:'addUser'}">添加用户信息</router-link>

        <table border="1" style="width: 100%" v-for="user in users">
          <th>姓名</th>
          <th>年龄</th>
          <th>收入</th>
          <th>操作</th>
          <tr style="text-align: center" v-for="user,index in users">
            <td>{{user.name}}</td>
            <td>{{user.age}}</td>
            <td>{{user.salary}}</td>
            <td>
              <!-- <a href="javascript:;" style="text-decoration: none">修改</a> -->
              <router-link :to="{name:'editUser'}">修改</router-link>
            </td>
          </tr>
        </table>
        <router-view></router-view>
      </div>
    </template>
  </body>
</html>
<script src="../../js/vue.js"></script>
<script src="../../js/vue-router.js"></script>

<script>
  // 定义组件，其实也就是一个对象
  const users = {
    template: "#users",
    data() {
      return {
        users: [
          { name: "李泽民", age: 28, salary: 28000, opration: "修改 删除" },
        ],
      };
    },
  };

  const addUser = {
    template: "<div>添加用户信息</div>",
  };

  const editUser = {
    template: `<div>修改用户信息</div>`,
  };

  const router = new VueRouter({
    routes: [
      {
        path: "/users",
        name: "users",
        component: users,
        children: [
          { path: "/addUser", name: "addUser", component: addUser },
          { path: "/editUser", name: "editUser", component: editUser },
        ],
      },
    ],
  });

  const app = new Vue({
    el: "#app",
    router: router,
    data: {
      msg: "学习使用嵌套路由",
    },
  });
</script>
